<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--  CDN 链接 引入方法  -->
    <!--  jQuery 文件  -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.0/jquery.min.js">//jQuery</script>
    <!--  Bootstrap 的 CSS 样式文件  -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
    <!--  Bootstrap 的 JS 文件 (动画效果需要jQuery)  -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js">// bootstrap </script>
    <!--  Vue 文件  -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.9/vue.min.js"></script>
    <!--  以下为 css样式书写区  -->
    <style>


    </style>

</head>
<body>
<div class="container-fluid">
    <h1 class="text-center">服务器基本信息</h1>
    <div class="bs-example" data-example-id="contextual-table">
        <table class="table">
            <thead>
            <tr>
                <th>#</th>
                <th>主机名</th>
                <th>版本信息</th>
                <th>核心版本</th>
                <th>系统类型</th>
                <th>启动时间</th>
                <th>运行时间</th>
            </tr>
            </thead>
            <tbody>
            <tr class="active">
                <th scope="row">1</th>
                <td>{{sys_info.hostname}}</td>
                <td>{{sys_info.release_info}}</td>
                <td>{{sys_info.kernel_version}}</td>
                <td>{{sys_info.system_type}}</td>
                <td>{{sys_info.boot_time}}</td>
                <td>{{sys_info.uptime}}</td>
            </tr>
            </tbody>
        </table>
    </div>
    <hr>
    <h1 class="text-center">CPU详细信息</h1>
    <div class="bs-example" data-example-id="contextual-table">
        <table class="table">
            <thead>
            <tr>
                <th>#</th>
                <th>CPU类型</th>
                <th>CPU总核心数</th>
                <th>CPU物理单核/核</th>
                <th>CPU用户使用</th>
                <th>CPU系统使用</th>
            </tr>
            </thead>
            <tbody>
            <tr class="active">
                <th scope="row">1</th>
                <td>{{cpu_info.cpu_model}}</td>
                <td>{{cpu_info.cpu_core_total}}</td>
                <td>{{cpu_info.cpu_physics_per}}</td>
                <td>{{cpu_info.user_cpu_use}} %</td>
                <td>{{cpu_info.sys_cpu_use}} %</td>

            </tr>
            </tbody>
        </table>
    </div>
    <hr>
    <h1 class="text-center">CPU详细信息使用率</h1>
    <div class="bs-example" data-example-id="contextual-table">
        <table class="table">
            <thead>
            <tr>
                <th>#</th>
                <th>CPU使用率</th>
            </tr>
            </thead>
            <tbody>
            <tr class="active">
                <th scope="row">1</th>
                <td>{{cpu_usage}}</td>
            </tr>
            </tbody>
        </table>
    </div>
    <hr>
    <h1 class="text-center">服务器负载</h1>
    <div class="bs-example" data-example-id="contextual-table">
        <table class="table">
            <thead>
            <tr>
                <th>#</th>
                <th>负载当前</th>
                <th>负载历史一</th>
                <th>负载历史二</th>
            </tr>
            </thead>
            <tbody>
            <tr class="active">
                <th scope="row">1</th>
                <td>{{load_average.first}}</td>
                <td>{{load_average.second}}</td>
                <td>{{load_average.third}}</td>
            </tr>
            </tbody>
        </table>
    </div>
    <hr>
    <h1 class="text-center">磁盘使用</h1>
    <div class="bs-example" data-example-id="contextual-table">
        <table class="table">
            <thead>
            <tr>
                <th>#</th>
                <th>硬盘总大小</th>
                <th>已使用</th>
                <th>可使用</th>
                <th>占比</th>
                <th>挂载路径</th>
            </tr>
            </thead>
            <tbody>
            <tr class="active">
                <th scope="row">1</th>
                <td>{{disk_usage.filesystem_size}}</td>
                <td>{{disk_usage.used_space}}</td>
                <td>{{disk_usage.available_space}}</td>
                <td>{{disk_usage.usage_percent}} %</td>
                <td>{{disk_usage.mount_point}}</td>

            </tr>
            </tbody>
        </table>
    </div>
    <hr>
    <h1 class="text-center">磁盘inode 信息</h1>
    <div class="bs-example" data-example-id="contextual-table">
        <table class="table">
            <thead>
            <tr>
                <th>#</th>
                <th>文件类型</th>
                <th>总大小</th>
                <th>已使用</th>
                <th>未使用</th>
                <th>可使用百分比</th>
                <th>挂载路径</th>
            </tr>
            </thead>
            <tbody>
            <tr class="active">
                <th scope="row">1</th>
                <td>{{inode_data.filesystem}}</td>
                <td>{{inode_data.inodes}}</td>
                <td>{{inode_data.iUsed}}</td>
                <td>{{inode_data.iFree}}</td>
                <td>{{inode_data.iUse}} %</td>
                <td>{{inode_data.mount_point}}</td>

            </tr>
            </tbody>
        </table>
    </div>
    <hr>
    <h1 class="text-center">Docker 信息</h1>
    <div class="bs-example" data-example-id="contextual-table">
        <table class="table">
            <thead>
            <tr>
                <th>#</th>
                <th>容器ID CONTAINER ID</th>
                <th>容器镜像 IMAGE</th>
                <th>容器命令 COMMAND</th>
                <th>创建时间 CREATED</th>
                <th>状态 STATUS</th>
                <th>端口转发 PORTS</th>
                <th>命名 NAMES</th>
            </tr>
            </thead>
            <tbody>
            {% for item in docker_container %}
            <tr class="active">
                <td>{{ loop.index }}</td>
                <td>{{ item.container_id }}</td>
                <td>{{ item.container_image }}</td>
                <td>{{ item.container_command }}</td>
                <td>{{ item.container_created }}</td>
                <td>{{ item.container_status }}</td>
                <td>{{ item.container_port }}</td>
                <td>{{ item.container_name }}</td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
    <hr>
</div>
</body>
</html>